<template>
	<div class="app">
		<div class="header">
			<div class="wrap">
				<u-row gutter="16" justify="space-between">
					<u-col span="2">
						<div class="demo-layout">
							<img class="headPortrait"
								:src="'http://all5joy.img-cn-beijing.aliyuncs.com/res/wxsc/images/defaultAvatarImage.png'" />
						</div>
					</u-col>
					<u-col span="10">
						<div class="demo-layout -light">
							<div class="userName customColor">
								自夏
							</div>
							<div class="userMsg customColor">
								<span>等级：77777777</span>
							</div>
						</div>
					</u-col>
				</u-row>
			</div>
		</div>

		<div class="profit">
			<view class='tuijianBox'>
				<image src="http://p4.music.126.net/sDu_Al0lMMGp-4tbSLAXJw==/109951165958897327.jpg?param=1024y1024"
					mode="" class="tuijian"></image>
				<view class="recommend_font">
					<view class='recommend_font_msg'>
						<view>每日</view>
						<view>推荐</view>
					</view>
					<view class="playBox">
						<image class="playBox_Ionc" src="../../../../../static/Image/close.png"></image>
					</view>
				</view>
			</view>
		</div>

		<div
			style='width: 90%;height: 200rpx;background-color: rgb(245, 245, 247); margin: auto;border-radius: 0.5rem;display: flex;padding: 1rem;'>
			<div style='width:30%;'>
				<image src="../../../../../static/logo.png" style="width: 100%;height: 100%;" mode=""></image>
			</div>
			<div style='padding-left: 0.5rem;width: 70%;'>
				<div style='    font-size: 1rem;font-weight: 600;    margin-bottom: 0.8rem;'>标题太体贴</div>
				<div style='margin-bottom: 0.8rem;'>标题太体贴·</div>
				<div style='display: flex;flex-wrap:wrap;display: -webkit-flex; '>

					<div>
						<u-icon name="thumb-down" color="#ccc" size="50"></u-icon>
					</div>
					<div>
						<u-icon name="play-right" color="#ccc" size="48"></u-icon>
					</div>
					<div>
						<u-icon name="rewind-right" color="#ccc" size="58"></u-icon>
					</div>

				</div>
			</div>
			<div style=' margin:0 auto;width:20px;line-height:24rpx;'>
				<u-icon name="rewind-right" color="#ccc" size="38"></u-icon>
				士大夫
			</div>
		</div>


		<u-cell-group>
			<u-cell-item title="推荐歌单" value="查看全部" @click='nextPage'></u-cell-item>
		</u-cell-group>
		<div class="container">
			<div class="item" v-for='item,index in dataObj.ThePlaylist' :key='index'>
				<view class='recommend'>
					<u-image width="100%" height="100%" :src="item.picUrl">
						<u-loading slot="loading"></u-loading>
					</u-image>
					
					<image class="hoverShow" src="../../../../../static/Image/close.png"></image>
					
				</view>
				
				<div class='recommend_BXo' @click='musicListInfo(item)'>
					<text class="recommend_title">{{item.name}}</text>
					<view class="recommend_msg">{{item.copywriter}}</view>
				</div>
			</div>
		</div>

		<u-cell-group>
			<u-cell-item title="新歌速递" value="查看全部"></u-cell-item>
		</u-cell-group>
		<div class="container">
			<div class="item" v-for='item,index in dataObj.albumslist' :key='index'>
				<view class='recommend'>
					<u-image width="100%" height="100%" :src="item.blurPicUrl">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<image class="hoverShow" src="../../../../../static/Image/close.png"></image>
				</view>
				<div class='recommend_BXo' @click='musicListInfo(item)'>
					<text class="recommend_title">{{item.name}}</text>
					<view class="recommend_msg">{{item.company}}</view>
				</div>
			</div>
		</div>


		<u-cell-group>
			<u-cell-item title="推荐艺人" value="查看全部" @click='nextPage'></u-cell-item>
		</u-cell-group>
		<div class="container">
			<div class="item" style='height: 400rpx;' v-for='item,index in dataObj.artists' :key='index'>
				<view class='recommend' style="height: 88%;">
					<!-- <image style="border-radius: 50%;" :src="item.img1v1Url || '../../../../../static/logo.png'"></image> -->
					<u-image width="100%" height="100%" border-radius='200' :src="item.img1v1Url">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<image class="hoverShow" src="../../../../../static/Image/close.png"></image>
				</view>
				<text class="recommend_title" style="text-align: center;">{{item.name}}</text>
		<!-- 		<div class='recommend_BXo' @click='musicListInfo(item)'>
					
				</div> -->
			</div>
		</div>

		<u-cell-group>
			<u-cell-item title="排行榜" value="查看全部" @click='nextPage'></u-cell-item>
		</u-cell-group>

		<div class="profit" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
			<view class='tuijianBox' style="margin-bottom: 1rem;" v-for="item,index in dataObj.rankingList" :key='index'>
				<image :src="item.coverImgUrl" mode="" class="tuijian"></image>
			<!-- 	<u-image width="100%" height="100%" :src="item.coverImgUrl">
					<u-loading slot="loading"></u-loading>
				</u-image> -->
				<view class="recommend_font" @click='musicListInfo(item)'>
					<view class='recommend_font_msg' style="font-size: 1rem;width: 100%;">
						<view>{{item.name}}</view>
						<view>{{item.updateFrequency}}</view>
					</view>
					<view class="playBox">
						<image class="playBox_Ionc" src="../../../../../static/Image/close.png"></image>
					</view>
				</view>
			</view>
		</div>

		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				dataObj: {
					rankingList: [],
					ThePlaylist: [],
					albumslist: [],
				},
			};
		},
		onLoad() {
			this.getTopmiust();
			this.RecommendThePlaylist();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async RecommendThePlaylist() {
				const {
					result
				} = await this.MusicRequest('personalized?limit=6');
				const {
					albums
				} = await this.MusicRequest('album/new?area=EA&limit=6')
				// 推荐艺人
				const {list}=await this.MusicRequest('toplist/artist')
				// console.log(list);
				this.dataObj.artists = list.artists.slice(0, 6);
				this.dataObj.ThePlaylist = result;
				this.dataObj.albumslist = albums;
			},
			async getTopmiust() {
				const {
					list
				} = await this.MusicRequest('toplist');
				this.dataObj.rankingList = list.slice(0, 6);
			},
			nextPage() {
				uni.navigateTo({
					url: './classType',
				});
			},
			musicListInfo(data) {
				uni.navigateTo({
					url: './musicListInfo?id=' + data.id,
				});
			}
		},
	}
</script>

<style scoped lang="less">
	@import '../../../../../static/css/mlmCommon.less';
	@import '../../../../../static/css/user.less';
	@import '../../../../../static/css/sharePopup.less';

	@color: #c3a768;
	@bgFFF: #ffffff;
	@bodeR: 20rpx;
	@font40: 40rpx;


	.container {
		display: flex;
		flex-wrap: nowrap;
		/* 允许项目换行,空间不足时分成多行显示 */
		flex-wrap: wrap;
		/* 允许项目换行,第一行在下面,反向排列项目 */
		flex-wrap: wrap;
	}


	.item {
		width: 47%;
		height: 500rpx;
		margin: 1.5%;
		// background:#f4f4f4;
		// border-radius: 10rpx;
		// height: 10rem;
		
		border-radius: 7px;
		background: linear-gradient(145deg, #f8f8f8, #e5e5e5);
		box-shadow:  26px 26px 46px #f4f4f4,
		             -26px -26px 46px #f4f4f4;
	}

	.tuijianBox {
		border-radius: 1rem;
		height: 200rpx;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.tuijian {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		animation: move 38s infinite;
		animation-direction: alternate;
		z-index: -1;
	}

	.recommend_font {
		width: 100%;
		height: 100%;
		color: #FFF;
		// border-radius: 1rem;
	}

	.recommend_font_msg {
		position: fixed;
		font-size: 2rem;
		width: 30%;
		text-align: center;
		letter-spacing: 10rpx
	}

	.playBox {
		float: left;
		width: 80%;
	}

	.playBox_Ionc {
		width: 2rem;
		height: 2rem;
		position: absolute;
		right: 0.4rem;
		bottom: 0.24rem;
	}

	.recommend {
		width: 100%;
		height: 70%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row wrap;
		justify-content: center;

		image:nth-child(1) {
			width: 240rpx;
			height: 240rpx;
			position: inherit;
		}

		image:nth-child(2) {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: none;
		}
	}

	.app/deep/.u-cell_title {
		font-size: 36rpx;
		font-weight: 700;
	}

	.recommend_title {
		font-size: 32rpx;
		font-weight: 600;
		.Beyondhidden();
	}

	.recommend_msg {
		font-size: 22rpx;
		opacity: 0.68;
		line-height: 18px;
		.Beyondhidden();
	}

	.recommend_BXo {
		margin: 10rpx;
		// position: absolute;
		// bottom: -42%;
	}

	.recommend:hover {

		image:nth-child(2) {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: block;
			animation-name: slide;
			animation-duration: 0.5s;
			animation-timing-function: ease-in;
		}

	}


	@keyframes slide {
		0% {
			width: 0rpx;
			height: 0rpx;
		}

		50% {
			width: 40rpx;
			height: 40rpx;
		}

		100% {
			width: 80rpx;
			height: 80rpx;
		}
	}

	@keyframes move {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-50%);
		}
	}
</style>
